<template>
  <section class='f-home'>
    <!-- 顶部导航 -->
    <van-nav-bar class="f-nav-bar" v-if="navBarInfo.show" :title="navBarInfo.title"
      :style="{'background': navBarInfo.bg? navBarInfo.bg: '#fff'}">
      <template v-if="navBarInfo.left" #left>
        <van-icon v-if="navBarInfo.leftType == 'back'" name="arrow-left" size="18" @click="pageBack" />
        <van-icon v-if="navBarInfo.leftType == 'cross'" name="cross" size="18" @click="pageBack" />
      </template>
      <template v-if="navBarInfo.right" #right>
        <p v-if="navBarInfo.rightText" @click="pageJump(navBarInfo.path)">{{navBarInfo.rightText}}</p>
      </template>
    </van-nav-bar>

    <section class="f-no-network" :class="{noNetworkTop: ['/index','/meal','/mine'].includes(activeMenu)}" v-if="noNetwork">
      <img src="@/assets/icons/icon_prompt.png" alt="">
      <span>当前无法连接网络，可检查网络设置是否正常。</span>
    </section>

    <!-- 内容 -->
    <router-view class="f-content"
      :class="{isPaddingTop: !navBarInfo.show, isPaddingBottom: ['/index','/mine'].includes(activeMenu)}" v-slot="{ Component }">
      <keep-alive :include="cacheRouteList">
        <component :is="Component" />
      </keep-alive>
    </router-view>

    <!-- 底部导航 -->
    <van-tabbar class="f-tabbar" v-if="['/index','/meal','/customer','/mine'].includes(activeMenu)" safe-area-inset-bottom
      v-model="activeMenu" active-color="#488BFE" @change="tabbarChange">
      <van-tabbar-item name="/index" icon="home-o">
        <span>首页</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/icons/icon_table_home_s.png" alt="">
          <img v-else src="@/assets/icons/icon_table_home_f.png" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="/meal" icon="search">
        <span>套餐</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/icons/icon_table_recharg_s.png" alt="">
          <img v-else src="@/assets/icons/icon_table_recharg_f.png" alt="">
        </template>
      </van-tabbar-item>
      <!-- <van-tabbar-item name="/customer" icon="friends-o">
        <span>客服</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/icons/icon_table_service_s.png" alt="">
          <img v-else src="@/assets/icons/icon_table_service_f.png" alt="">
        </template>
      </van-tabbar-item> -->
      <van-tabbar-item name="/mine" icon="setting-o">
        <span>我的</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/icons/icon_table_mine_s.png" alt="">
          <img v-else src="@/assets/icons/icon_table_mine_f.png" alt="">
        </template>
      </van-tabbar-item>
    </van-tabbar>

  </section>
</template>

<script>
import { ref, reactive, toRefs, onMounted, watch, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from "vuex";
import JsBridge from '@/utils/JsBridge.js'
import { successDeal, warningDeal } from '@/utils/utils';
import { showToast } from 'vant';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const activeMenu = computed(() => {
      const { meta, path } = route;
      if (meta.openName) {
        return meta.openName;
      }
      return path;
    });

    const state = reactive({
      isExit: false,

      orderId: '',


      tabbar: 'index',
      navBarInfo: computed(() => {
        return store.state.navBarInfo;
      }),

      cacheRouteList: computed(() => {
        return store.state.cacheRouteList
      }),

      noNetwork: computed(() => {
        return store.state.noNetwork
      }),
    })


    onMounted(() => {
      // 监听手势返回
      JsBridge.registerHandler("onBack", function (data, responseCallback) {
        let urlList = ['/more/changePwd', '/share', '/index', '/meal', '/customer', '/mine', '/']
        if (['/index', '/meal', '/customer', '/mine'].includes(route.path)) {
          if (!state.isExit) {
            showToast({
              message: '是否确定退出App',
              duration: 1000
            })
            state.isExit = true
            setTimeout(() => {
              state.isExit = false
            }, 1000)
          } else {
            JsBridge.callHandler('exit', {}, (response) => {
              successDeal('退出App！')
            })
          }
        }

        if (!urlList.includes(route.path)) {
          pageBack()
        }

        if (route.path == '/more/changePwd') {
          if (route.query.flag) {
            warningDeal('为保证你的账户安全，请您修改账户密码并重新登录')
          } else {
            pageBack()
          }
        }

        if (route.path == '/meal' && route.query.flag) {
          pageBack()
        }
      });
    })

    const pageBack = () => {
      router.go(-1)
    };

    const pageJump = (path) => {
      router.push(path)
    }

    const tabbarChange = (path) => {
      removeCacheRoute()

      router.replace(path)
      state.tabbar = path
    }

    const removeCacheRoute = () => {
      store.commit("removeCacheRoute", 'meal');
      store.commit("removeCacheRoute", 'outChinaMeal');
      store.commit("removeCacheRoute", 'mealSearch');
    }

    return {
      ...toRefs(state),
      activeMenu,
      pageBack,
      pageJump,
      tabbarChange,
    }
  }
}
</script>

<style lang='scss' scoped>
.f-home {
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  height: 100%;
  .f-content {
    background-color: #f5f5f5;
    overflow-x: hidden;
    flex: 1;
  }
  .isPaddingTop {
    // padding-top: 27px;
  }
  .isPaddingBottom {
    padding-bottom: 70px;
  }
  .f-tabbar {
    padding-bottom: 20px;
  }
  .f-no-network {
    display: flex;
    align-items: center;
    background-color: #fdeded;
    line-height: 40px;
    padding: 0 20px;
    img {
      width: 14px;
    }
    span {
      margin: 0 10px;
    }
  }
  .noNetworkTop {
    margin-top: 50px;
  }
}
</style>

<style>
.van-hairline--bottom:after {
  border-bottom-width: 0 !important;
}
</style>